<!-- 治疗任务 -->
<template>
  <div class="main-content-container">
    <div ref="search" style="padding-bottom: 10px">
      <el-row type="flex" justify="space-between" class="mt10">
        <!-- <el-col>
        <el-form ref="searchFormRef" :model="searchForm" label-width="80px" :inline="true">
          <el-form-item>
            <el-input v-model="custQuery" placeholder="姓名、手机号、编号" clearable />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchBtn">搜索</el-button>
            <el-button @click="eliminate">清除</el-button>
          </el-form-item>
        </el-form>
      </el-col> -->
        <el-col :span="14" class="searchs-y">
          <el-form ref="searchs" label-width="80px" :inline="true">
            <el-form-item>
              <el-input v-model="custQuery" placeholder="姓名、手机号、编号" clearable @change="handleChange">
                <el-button slot="append" icon="el-icon-search" @click="handleChange" />
              </el-input>
              <el-form-item v-if="false" class="spn buttons clear-button">
                <el-button type="primary" @click="eliminate">清除</el-button>
              </el-form-item>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="2" class="spn buttons" style="text-align:right;display:block">
          <el-button @click="addTaskBtn('add')">+ 治疗登记</el-button>
        </el-col>
      </el-row>
      <el-row class="mt10" type="flex">
        <Search :data="selections" :attribute="'showTime'" @dateChange="handleDateChange" @change="handleTypeChange" />
        <DictionarySelector class="dictSelector el-select-y" placeholder="请选择项目类型" :value.sync="searchForm.productAttributes" code="swan_department_xmlx" @change="handleChange" />
      </el-row>
      <el-row class="mt10">
        <Tabs v-model="searchForm.status" :data="filtrateList" @change="handleConditionChange" />
      </el-row>
    </div>
    <!-- 表单区域 -->
    <div class="box-show" :style="'height:'+ (innerHeight + 86) + 'px'">
      <el-table v-loading="loading" :data="cureTaskList" border :row-class-name="tableColor" :height="innerHeight">
        <el-table-column label="顾客" prop="customerName" :show-overflow-tooltip="true" />
        <el-table-column label="性别" prop="customerSex" :show-overflow-tooltip="true" />
        <el-table-column label="类型" prop="type" :show-overflow-tooltip="true" min-width="120" />
        <el-table-column label="科室" prop="deptName" :show-overflow-tooltip="true" />
        <el-table-column label="待治疗项目" prop="content" :show-overflow-tooltip="true" />
        <el-table-column label="主治医生" prop="doctor" :show-overflow-tooltip="true" />
        <el-table-column label="咨询师" prop="counselor" :show-overflow-tooltip="true" />
        <!-- <el-table-column label="分诊人" prop="accepterName" :show-overflow-tooltip="true" /> -->
        <el-table-column label="状态" prop="status" :show-overflow-tooltip="true" />
        <el-table-column label="预约时间" prop="appointmentTime" :show-overflow-tooltip="true" />
        <el-table-column label="划扣次数" prop="deductNum" :show-overflow-tooltip="true" />
        <!-- <el-table-column v-if="searchForm.status === '待治疗'" label="已等时间" prop="waitTime" :show-overflow-tooltip="true" /> -->
        <el-table-column label="操作" min-width="220">
          <template slot-scope="scope">
            <div>
              <el-button v-if="scope.row.status==='预约中'||scope.row.status==='已到达'" type="text" @click="drawBtn(scope.row)">划扣</el-button>
              <el-button v-if="scope.row.productAttributes === '美容项目' ||scope.row.productAttributes === '手术项目'" type="text" @click="medicalBtn(scope.row)">写病历</el-button>
              <el-button v-if="scope.row.productAttributes === '美容项目' || scope.row.productAttributes === '手术项目'" type="text" @click="prescriptionBtn(scope.row)">开处方</el-button>
              <el-button v-if="scope.row.productAttributes === '美容项目' ||scope.row.productAttributes === '手术项目'" type="text" @click="orderBtn(scope.row)">开单</el-button>
              <!-- <el-button type="text" @click="completeTreatmentBtn(scope.row.triageId)">完成治疗</el-button> -->
              <el-button v-if="scope.row.status==='预约中'" type="text" @click="addTaskBtn('eadit',scope.row)">修改</el-button>
              <el-button v-if="scope.row.status==='预约中'" type="text" @click="cancelAppointment(scope.row.id)">取消预约</el-button>
            </div>
          <!-- <div v-else>
            <el-button type="text" @click="lookDetails(scope.row.id)">查看详情</el-button>
          </div> -->
          </template>
        </el-table-column>
      </el-table>
      <pagination :page-num="params.page" :page-size="params.pageSize" :on-change="handlePaginationChange" :total="total" />
    </div>
    <!-- 添加任务 -->
    <AddTask ref="addTaskRef" :visible.sync="addTaskVisible" @success="getChargeList" />
    <!-- 划扣 -->
    <DrawDialog ref="addCureRef" :text-btn="textBtn" @success="getChargeList" />
    <!-- 写病历 -->
    <MedicalDialog ref="addMedicalRef" :title="title" :reveal="reveal" :control="true" @success="getChargeList" />
    <!-- 处方 -->
    <PrescriptionDialog ref="addPrescriptionRef" :title="title" :reveal="reveal" :control="true" @success="getChargeList" />
    <!-- 开单 -->
    <Billing v-if="billing" ref="billing" :bill-type="'科室开单'" :billing-data="billingData" @cancels="billing = false" />
    <!-- 查看详情 -->
    <Details ref="detailsRef" :visible.sync="detailsVisible" :title="title" />
  </div>
</template>
<script>
import { DictionarySelector } from "@rabbit.do/rabbit";
import Search from "@/components/Search";
// import { selections } from "@/config";
import AddTask from "../../center/triage/dialog";
import DrawDialog from "./drawDialog";
import MedicalDialog from "./medicalDialog";
import PrescriptionDialog from "./prescriptionDialog";
import Billing from "../../../lobby/doctor/billing";
import Details from "../../center/projectmenu/dialog";
import { tableColor, labelHeigh } from '@/utils/common.js';
import Tabs from "@/components/SearchSelection";
export default {
  components: {
    DictionarySelector,
    Search,
    AddTask,
    DrawDialog,
    MedicalDialog,
    PrescriptionDialog,
    Billing,
    Details,
    Tabs,
  },
  data() {
    return {
      tableColor,
      innerHeight: null,
      selections: [
        {
          name: "前七天",
          id: "week",
        },
        {
          name: "昨天",
          id: "yesterday",
        },
        {
          name: "今天",
          id: "today",
        },
        {
          name: "自定义",
          id: "custom",
        },
      ],
      filtrateList: [
        {
          name: "全部",
          id: "全部",
        },
        {
          name: "预约中",
          id: "预约中",
        },
        {
          name: "已到达",
          id: "已到达",
        },
        {
          name: "已划扣",
          id: "已划扣",
        },
        {
          name: "已取消",
          id: "已取消",
        },
      ],
      searchForm: {
        status: "预约中",
      },
      params: {
        page: 1,
        pageSize: this.$store.state.commonsettings.maxPageSize,
      },
      total: 0,
      options: [],
      cureTaskList: [],
      subscribeForm: {},
      lookSubscribeForm: {},
      projectNameOptions: [],
      receiverOptions: [],
      seleteDate: "", // 预约选择日期
      cities: [], // 预约时段
      selectCustomer: {},
      selectProject: {},
      billing: false, // 开单
      billingData: {},
      title: "",
      textBtn: "",
      reveal: true,
      addTaskVisible: false,
      // medicalVisible: false,
      // prescriptionVisible: false,
      detailsVisible: false,
      loading: false,
      custQuery: "",
      subscribeFormRules: {
        customerName: [
          {
            required: true,
            message: "请输入顾客名称",
            trigger: ["blur", "change"],
          },
        ],
        intentCaseName: [
          { required: true, message: "请选择项目", trigger: "change" },
        ],
        appointmentDate: [
          { required: true, message: "请选择预约时间", trigger: "change" },
        ],
      },
      lookSubscribeRules: {
        cancelReason: [
          { required: true, message: "请选择取消原因", trigger: "change" },
        ],
      },
    };
  },
  mounted() {
    this.getChargeList();
    this.timer = setInterval(() => {
      this.getChargeList();
    }, 1000 * 60);
    this.innerHeight = labelHeigh(this.$refs.search);
  },
  destroyed() {
    clearInterval(this.timer);
  },
  methods: {
    async cancelAppointment(id) { // 取消预约
      const confirmResult = await this.$confirm('请确认是否取消预约?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch((err) => err);
      if (confirmResult === 'confirm') {
        this.$api["department/diagnose/curetask/cancelTreatList"]({ id }).then((res) => {
          if (res.code !== 200) return this.$message.error('取消预约失败');
          this.getChargeList();
          return this.$message.success('取消预约成功');
        });
      }
    },
    async getChargeList() {
      this.searchForm.deptId = this.$store.getters.currentUserInfo.deptUsrList[0].deptId;
      if (!this.searchForm.deptId) {
        this.searchForm.deptId = 0;
      }
      if (!this.searchForm.showTime) {
        const date = new Date();
        const year = date.getFullYear();
        const month = date.getMonth() + 1;
        const day = date.getDate();
        const beginTime = year + "-" + month + "-" + day + " 00:00:00";
        const endTime = year + "-" + month + "-" + day + " 23:59:59";
        this.searchForm.timeType = "today";
        this.searchForm.showTime = beginTime + "_" + endTime;
      }
      const searchForm = JSON.parse(JSON.stringify(this.searchForm));
      if (searchForm.status === "全部") searchForm.status = undefined;
      this.loading = true;
      const res = await this.$api["department/diagnose/curetask/getTreatList"]({
        ...this.params,
        query: searchForm,
        custQuery: this.custQuery,
      });
      this.loading = false;
      if (res.code !== 200) return this.$message.error("查询治疗任务列表失败");
      this.cureTaskList = res.data.result;
      this.total = res.data.total;
    },
    handlePaginationChange(val) {
      this.params = { page: val.pageNum, pageSize: val.pageSize };
      this.getChargeList();
    },
    // 搜索
    searchBtn() {
      this.getChargeList();
    },
    // 添加任务
    addTaskBtn(val, row) {
      this.title = "添加任务";
      this.addTaskVisible = true;
      this.$nextTick(() => {
        this.$refs.addTaskRef.addTriage(val, row);
      });
    },
    // 划扣
    async drawBtn(row) {
      this.title = "划扣";
      this.textBtn = "提交";
      this.$refs.addCureRef.drawBtn(row);
    },
    // 写病历
    medicalBtn(row) {
      this.title = "写病历";
      this.reveal = false;
      this.$refs.addMedicalRef.medicalBtn(row);
    },
    // 开处方
    prescriptionBtn(row) {
      this.title = "开处方";
      this.reveal = false;
      const control = { shows: true };
      this.$refs.addPrescriptionRef.prescriptionBtn(row, control);
    },
    // 开单
    orderBtn(row) {
      this.billingData = {
        customerId: row.customerId,
        customerName: row.customerName,
        orderPaymentStyle: "全款",
        customerPhone: row.customerPhone,
        customerCode: row.customerCode,
      };
      this.billing = true;
      this.$nextTick(() => {
        this.$refs.billing.init();
      });
    },
    // 完成治疗
    async completeTreatmentBtn(id) {
      const res = await this.$api["department/projectmenu/FinishDeptProjedtTask"]({ id });
      if (res.code !== 200) return this.$message.error("操作失败！");
      this.getChargeList();
    },
    // 查看详情
    lookDetails(id) {
      this.title = "项目单详情";
      this.detailsVisible = true;
      this.$refs.detailsRef.toViewBtn(id);
      // this.$router.push({
      //   path: '/swan/department/center/projectmenu',
      //   query: {
      //     isPopup: true,
      //     id: id,
      //   },
      // });
    },
    // 顶部时间筛选
    handleDateChange(val) {
      // val.showTime = val.createdTime;
      Object.assign(this.searchForm, val);
      this.getChargeList();
    },
    handleTypeChange(val) {
      // val.showTime = val.createdTime;
      Object.assign(this.searchForm, val);
      this.getChargeList();
    },
    handleChange() {
      this.params.page = 1;
      this.getChargeList();
    },
    handleConditionChange(val) {
      this.searchForm.status = val;
      this.getChargeList();
    },
    eliminate() {
      this.custQuery = "";
      this.searchForm = {};
      this.params.page = 1;
      this.getChargeList();
    },
  },
};
</script>
<style lang="scss" scoped>
.dateStyle {
  margin-bottom: 0;
}
::v-deep .el-autocomplete {
  width: 100%;
}
</style>

